<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css布局.css">
</head>
<body>
<div class="body-content">
    <div class="content">content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
<!--<p>尝试滚动页面。</p>
<div class="sticky">通过position:sticky 定位</div>
<div style="padding-bottom:2000px">
    <p>滚动我</p>
    <p>来回滚动我</p>
    <p>滚动我</p>
    <p>来回滚动我</p>
    <p>滚动我</p>
    <p>来回滚动我</p>
</div>




<h2>这是一个没有定位的标题</h2>
<h2 class="relative">这个元素是通过position:relative定位的</h2>
<h2>这是一个没有定位的标题</h2>

<p class="fixed">这是一个position:fixed定位的元素</p>
<p>元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：</p>
<p>元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：</p>
<p>元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p>元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：</p>
<p>元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：</p>


<div class="absolute">这是一个绝对定位了的标题</div>
<p>用绝对定位(position:absolute)</p>
<p>标题下面放置距离左边的页面100 px和距离页面的顶部70 px的元素</p>

<h2>position: static;</h2>
<p>使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象:</p>
<div class="static">
    该元素使用了 position: static;
</div>-->
</body>
</html>